<template>
  <div>
    <div style="width: 50%; padding-left: 10px;">
      <a-input-search
          v-model:value="data.searchName"
          allow-clear
          enter-button
          placeholder="搜索岗位名称/公司名称/薪资/城市"
          size="large"
          @search="onSearch"
      />

    </div>
  </div>

  <a-list :data-source="listData" :pagination="pagination" item-layout="vertical" size="small">
    <template #footer>
      <div style="width: 80%; padding-left: 10px;">
        <b>希望您在职场中找到属于自己的位置，实现人生价值！</b>
        祝您工作顺利，生活美满，前程似锦！
      </div>
    </template>
    <template #renderItem="{ item }">

      <a-list-item key="item.title" class="list-item">
        <template #extra>
          <div style=" display: flex;margin-right: 50px">
            <div><img
                alt="logo"
                :src="'http://localhost:8080/file/download?name='+item.jobCompanyLogo"
                style="margin-right: 20px; width: 150px; height: 130px;border-radius: 20px;margin-bottom: 10px"
            /></div>

            <div style="display: flex; align-items: center;flex-direction: column">
              <h3 style="float: right;margin-right: 80px;width: 100px"> {{ item.jobCompanyName }} </h3>
              <div style="display: flex; justify-content:space-around; width: 100%">

                <h4>{{ item.jobCompanyIndustry }}</h4>
                <h4>{{ item.jobCompanySize }}</h4>
              </div>

            </div>


          </div>

        </template>
        <a-list-item-meta>
          <template #description>
            {{ item.jobMajorRequirement }} &nbsp;&nbsp;
            {{ item.jobEducationRequirement }} &nbsp;&nbsp;
            {{ item.jobIndustry }}
          </template>
          <template #title>
            <router-link :to="{path:'/student/job/detail/'+item.jobId}">{{ item.jobTitle }}</router-link>
            <span style="float: right;color: red">薪资：{{ item.jobSalary }}</span>
            <br/>
            <span style="float: right">地点：{{ item.jobLocation }}</span>
          </template>
          <template #avatar>
            <!--            <a-avatar :src="item.avatar" style="width: 70px; height: 70px;"/>-->
            <a-avatar :src="'http://localhost:8080/file/download?name='+item.jobCompanyLogo"
                      style="width: 70px; height: 70px;"/>
          </template>
        </a-list-item-meta>
        岗位职责：{{truncateText( item.jobDescription) }}
        <br/>
        技能要求：{{ truncateText(item.jobSkillRequirement) }}
      </a-list-item>
    </template>
  </a-list>
</template>
<script setup>
import {onMounted, ref} from "vue";
import {pageJobAPI, queryJobByJobIndustryAPI, queryJobByJobPositionAPI} from "@/apis/job.js";
import http from "@/utils/http.js";
import {queryIntentionByUserIdAPI} from "@/apis/intention.js";
import {useUserStore} from "@/stores/user.js";


//获取数据
const useStore = useUserStore();
const listData = ref([]);
const tagsList = ref([]);
const jobsList = ref([]);
const data = ref({pageCurrent: 1, pageSize: 5, job_address: '', job_industry: '',searchName:'',jobStatus:'开放',jobAdminStatus:0});
const getData = async (data) => {
  //1.获取当前用户的求职期望
  const res1 = await queryIntentionByUserIdAPI(useStore.userInfo.userId);
  tagsList.value = JSON.parse(res1.data.data.tagsList);
  jobsList.value = JSON.parse(res1.data.data.jobsList);
  // 正确初始化 listData.value 为数组
  listData.value = [];

  // 2. 获取期望行业的岗位
  const res2 = await queryJobByJobIndustryAPI(tagsList.value);
  console.log("获取到的数据", JSON.stringify(res2));
  // 若 res2.data.data 是数组，使用扩展运算符将其元素展开添加到 listData.value 中
  if (Array.isArray(res2.data.data)) {
    listData.value.push(...res2.data.data);
  } else {
    // 若不是数组，直接添加
    listData.value.push(res2.data.data);
  }

  // 3. 获取期望岗位的岗位
  const res3 = await queryJobByJobPositionAPI(jobsList.value);
  console.log("获取到的数据", JSON.stringify(res3.data.data));
  // 若 res3.data.data 是数组，使用扩展运算符将其元素展开添加到 listData.value 中
  if (Array.isArray(res3.data.data)) {
    listData.value.push(...res3.data.data);
  } else {
    // 若不是数组，直接添加
    listData.value.push(res3.data.data);
  }
}

// 新增方法用于截断文本并添加省略号
const truncateText = (text) => {
  return text.slice(0, 20) + '. . . . .';
};
const pagination = {
  onChange: page => {
    console.log(page);
    data.value.pageCurrent = page
    getData(data.value)
  },
  pageSize: 5,
  total: 0,
};
// 生命周期
onMounted(() => {
  getData(data.value);
});

//搜索
const onSearch = searchValue => {
  console.log('use value', searchValue);
  getData(data.value);
};
//筛选
const check = data => {
  console.log(data.job_address)
  console.log(data.job_industry)
  getData(data);
}

</script>
<style scoped>
.list-item {
  margin: 10px 10px 0;
  padding: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.1);
  border-radius: 10px; /* 你可以调整这个值来改变圆角的大小 */

  h4 {
    background-color: #F5F5F5;
    padding: 9px;
    border-radius: 5px;
  }
}
</style>
